<template>
  <v-layout class="release-container" justify-start align-start wrap>
    <v-flex md12 text-xs-left>
      <v-btn flat round @click="$router.go(-1)">
        <!-- <ui-icon icon="angle-left fa-lg"></ui-icon> -->
        <v-icon>keyboard_arrow_left</v-icon>
        <div class="ml-2">返回</div>
      </v-btn>
    </v-flex>
    <v-flex md6 pt-4>
      <v-layout justify-start align-center wrap px-5>
        <v-flex md12 d-flex align-center justify-start>
          <!-- 充值金额 -->
          <v-flex md4>
            <span class="subTitle title-color">店铺名称 *</span>
          </v-flex>

          <v-flex md8>
            <!-- <span class="title title-color">{{ shop.shopName }}</span> -->

            <v-text-field type="text" solo v-model="shop.shopName" hide-details></v-text-field>
          </v-flex>
        </v-flex>

        <v-flex md12 d-flex align-center justify-space-between mt-4>
          <!-- 充值方式 -->
          <v-flex md4>
            <span class="subTitle title-color">平台 *</span>
          </v-flex>

          <v-flex md8>
            <v-select solo :items="platforms" v-model="shop.platform"></v-select>
          </v-flex>
        </v-flex>

        <v-flex md12 d-flex align-center justify-space-between>
          <!-- 充值方式 -->
          <v-flex md4>
            <span class="subTitle title-color">国家 *</span>
          </v-flex>

          <v-flex md8>
            <v-select solo :items="countries" v-model="shop.country"></v-select>
          </v-flex>
        </v-flex>

        <v-flex md12 d-flex align-center justify-start>
          <!-- 充值金额 -->
          <v-flex md4>
            <span class="subTitle title-color">店铺链接 *</span>
          </v-flex>

          <v-flex md8>
            <!-- <span class="title title-color">{{ shop.interlinkage }}</span> -->

            <v-text-field type="text" solo v-model="shop.interlinkage" hide-details></v-text-field>
          </v-flex>
        </v-flex>

        <v-flex md12 mt-2 d-flex align-center justify-space-between>
          <!-- 交易流水号 -->
          <v-flex md4>
            <span class="subTitle title-color">备注</span>
          </v-flex>

          <v-flex md8>
            <v-textarea hide-details solo v-model="shop.checkExplains"></v-textarea>
          </v-flex>
        </v-flex>

        <v-flex md12 mt-4 d-flex align-center justify-center>
          <v-flex md4>
            <v-btn large round color="primary" @click="onSubmit">
              <span class="title">保存</span>
            </v-btn>
          </v-flex>
        </v-flex>
      </v-layout>
    </v-flex>
  </v-layout>
</template>


<script lang="ts">
// 使用类装饰器
import { Component, Vue } from "vue-property-decorator";
import { KV } from "@/utils/type";
import { Shop } from "@/api";
import { CheckCommon } from "@/api/bean";
import { PlatformKV, CountryKV } from "@/utils/constants";
import Cookie from "js-cookie";
declare const $Vue: Vue;

@Component({})
export default class TopupAudit extends Vue {
  private platforms: any = PlatformKV;
  private countries: any = CountryKV;

  private checkId: any = 0;

  private defaultShop: any = {
    interlinkage: "",
    shopName: "",
    remark: "",
    platform: 1,
    country: 1
  };

  private shop: any = {};

  private requiredFields: Array<string> = [
    "interlinkage",
    "shopName",
    "platform"
  ];

  protected mounted() {
    this.shop = Object.assign({}, this.defaultShop);
    let type = this.$route.params.type;
    if (type === "modify") {
      this.shop = this.$route.params.item;
    }
  }

  private onSubmit() {
    if (!this.validate()) {
      return $Vue.$emit("snackbar", {
        message: "请填写必填字段"
      });
    }
    this.addShop();
  }

  private validate(): boolean {
    let pass = true;
    this.requiredFields.forEach((item: string) => {
      if (this.shop[item] === "") {
        pass = false;
      }
    });
    return pass;
  }

  private async addShop() {
    const params: any = {
      userId: Cookie.get("seller_userId"),
      ...this.shop
    };
    const { data } = await Shop.addShop.r(params);
    console.log("addShop", data);
    $Vue.$emit("snackbar", {
      message: data.message
    });
    if (data.result === 0) {
      this.$router.go(-1);
    } else {
    }
  }
}
</script>

<style lang="less" scoped>
</style>


